<template>
  <div class="echarBox">
    <Echart :options="options" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      options: {},
    };
  },

  mounted() {},

  methods: {
    init(data) {
      const newData = {
        sj: [],
        qqzs: [],
        cgl: [],
      };

      data.map((item) => {
        newData.sj.push(item.sj);
        newData.qqzs.push(item.qqzs);
        newData.cgl.push((item.cgl * 100).toFixed(2));
      });

      this.options = {
        title: {
          text: "调用量统计",
          left: "center",
        },
        tooltip: {
          trigger: "axis",
          formatter: function (params) {
            // 添加单位
            var result = params[0].name + "<br>";
            params.forEach(function (item) {
              // console.log(item);
              if (item.seriesName == "成功率") {
                result +=
                  item.marker +
                  " " +
                  item.seriesName +
                  " : " +
                  item.value +
                  "%</br>";
              } else if (item.seriesName == "请求总数") {
                result +=
                  item.marker +
                  " " +
                  item.seriesName +
                  " : " +
                  item.value +
                  "次</br>";
              }
            });
            return result;
          },
        },
        legend: {
          top: "10%",
          data: ["请求总数", "成功率"],
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        dataZoom: [
          {
            type: "inside",
            realtime: true,
            start: 1,
            end: 100,
          },
        ],
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: newData.sj,
        },
        yAxis: [
          {
            name: "每小时调用量(次)",
            type: "value",
            axisLine: {
              lineStyle: {
                // color: "#00eaff",
              },
            },
          },
          {
            name: "每小时成功率(%)",
            nameLocation: "start",
            alignTicks: true, //属性指定了是否将两个Y轴的刻度对齐。
            type: "value",
            inverse: true, //反向
            axisLine: {
              lineStyle: {
                // color: "#2378f7",
              },
            },
          },
        ],
        series: [
          {
            name: "请求总数",
            type: "line",
            yAxisIndex: 0,
            data: newData.qqzs,
            itemStyle: {
              color: "#1990ff", // 将图例颜色改为蓝色
            },
          },
          {
            name: "成功率",
            type: "line",
            yAxisIndex: 1,
            data: newData.cgl,
            itemStyle: {
              color: "#12c2c1", // 将图例颜色改为绿色
            },
          },
        ],
      };
    },
  },
};
</script>

<style lang="scss" scoped>
.echarBox {
  width: 100%;
  height: 100%;
}
</style>